<template>
  <section>
    <div class="title">{{activity ? activity.title:''}}</div>
    <div class="editor-box">
      <div class="preview-box">
        <!-- 广告介绍页面 -->
        <div class="box top-pic">
          <div class="toolbar">
            <i class="el-icon-edit" @click="selFile('top')"></i>
          </div>
          <img v-if="picMap.top" :src="picMap.top" style="width:100%" />
          <div v-else class="empty-text">活动介绍图片</div>
        </div>
        <div class="box tj-box">
          <div class="toolbar">
            <i class="el-icon-setting" @click="showTjSetting"></i>
          </div>
        </div>
        <div class="box action-data">
          <div class="toolbar">
            <i class="el-icon-setting" @click="showDataSetting"></i>
          </div>
        </div>
        <div class="box action-box">
          <div class="toolbar">
            <i class="el-icon-edit" @click="selFile('action')"></i>
          </div>
          <img v-if="picMap.action" :src="picMap.action" style="width:100%" />
          <div v-else class="empty-text">活动提交图片</div>
        </div>
      </div>
      <div class="control-box"></div>
    </div>
    <!--<el-dialog :visible.sync="showDialog">-->
      <!--<choice-box :show-dialog="showDialog" @cancel="showDialog=false" @success="fileCallback"></choice-box>-->
    <!--</el-dialog>-->
    <choice-dialog :show.sync="showDialog" @success="fileCallback"></choice-dialog>
    <el-dialog :visible.sync="showBGDialog">
      <el-form label-width="80px">
        <el-form-item label="背景色：">
          <el-input size="mini" style="width: 120px;"></el-input>
        </el-form-item>
        <el-form-item label="背景图：">
          <el-button size="mini" type="primary" @click="selFile(currBg)">选择</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import choiceDialog from '@/components/fileManager/subs/choiceDialog'
  export default {
    name: "actvitity-visual-editor",
    components:{choiceDialog},
    data(){
      return {
        activity:null,
        picMap:{},
        currPos:null,
        showDialog:false,
        showBGDialog:false,
        currBg:null
      }
    },
    created(){
      if(!this.$route.params.id){
        this.$message.error('参数异常！')
        return
      }
      this.loadData(this.$route.params.id)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      loadData(id){
        // 加载 活动数据 ，看看是否全部数据都有
        this.fetch({
          name:'getActivity',
          data:{id}
        }).then(res=>{
          this.activity = res
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
      },
      selFile(pos){
        this.currPos = pos
        this.showDialog = true
      },
      showTjSetting(e){
        this.currBg = 'tj'
        this.showBGDialog = true
      },
      showDataSetting(e){
        this.currBg = 'data'
        this.showBGDialog = true
      },
      fileCallback(file){
        if(this.currPos){
          if(file.length)
            this.picMap[this.currPos] = file[0].uri
          else
            this.picMap[this.currPos] = file.uri
        }
        this.showDialog = false
      }
    }
  }
</script>

<style lang="scss">
  .editor-box{
    display: flex;
    flex-direction: row;
  }
  .editor-box .preview-box{
    width:540px;
    min-height: 600px;
    height:auto;
    border:1px solid #eee;
  }
  .editor-box .preview-box .box {
    position: relative;
    min-height: 60px;
    border:1px dashed #aaa;
  }
  .editor-box .preview-box .box:hover .toolbar{
    display: inline;
  }
  .editor-box .preview-box .top-pic{
  }

  .editor-box .preview-box .action-box{
  }
  .editor-box .preview-box .box .toolbar{
    position: absolute;
    top:5px;
    right:15px;
    font-size:20px;
    display: none;
  }
  .editor-box .preview-box .empty-text{
    line-height: 60px;
    text-align: center;
  }
  .editor-box .control-box{
    width:100%;
    border:1px solid greenyellow;
  }
</style>
